<template>
  <div class="flex bg-[#fff] text-[#303030] font-[300]">
    <div class="m-auto w">
      <div class="footer-content-wrapper flex gap-8 py-[60px]">
        <div class="flex flex-col flex-1 w-0 gap-4 text-[14px]">
          <div class="flex items-center gap-2 h-[58px]">
            <img class="h-[54px]" src="/images/logo.png" />
          </div>
          <div class="flex items-center gap-2">
            <n-icon class="text-[--main-color] text-[20px]">
              <LocationOutline></LocationOutline>
            </n-icon>
            <div class="w-[75%]">
              Paseo de las Palmas 735, Desp. 1406, Lomas de Chapultepec, Miguel Hidalgo,
              CDMX
            </div>
          </div>
          <div class="flex items-center gap-2">
            <!-- <img class="w-[18px] h-[18px]" src="/images/icons/li_phone@1x.png" /> -->
            <n-icon class="text-[--main-color] text-[20px]">
              <CallOutline></CallOutline>
            </n-icon>

            <div>+56 4174 2084</div>
          </div>
          <div class="flex items-center gap-2">
            <!-- <img class="w-[18px] h-[18px]" src="/images/icons/li_mail@1x.png" /> -->
            <n-icon class="text-[--main-color] text-[20px]">
              <MailOutline></MailOutline>
            </n-icon>
            <div>contacto@alib2b.com</div>
          </div>
          <div class="flex items-center gap-2">
            <!-- <img class="w-[18px] h-[18px]" src="/images/icons/li_clock-9@1x.png" /> -->
            <n-icon class="text-[--main-color] text-[20px]">
              <TimeOutline></TimeOutline>
            </n-icon>

            <div>8:00 - 20:00, lunes a viernes</div>
          </div>
        </div>
        <div class="flex flex-col gap-4 w-[300px] text-[14px]">
          <div
            class="flex items-center gap-2 h-[38px] text-[--main-color] text-[20px] font-[400]"
          >
            {{ $t("footer.第一次购买") }}
          </div>
          <!-- <div class="flex items-center gap-2">
            <div @click="onClickRegister" class="cursor-pointer">
              {{ $t("baseLayout.register") }}
            </div>
            /
            <div @click="onClickLogin" class="cursor-pointer">
              {{ $t("baseLayout.login") }}
            </div>
          </div> -->
          <div
            class="flex items-center gap-2 cursor-pointer"
            @click="goArtical('Política de términos y condiciones de pago')"
          >
            {{ $t("footer.付款条款和条件政策") }}
          </div>
          <div
            class="flex items-center gap-2 cursor-pointer"
            @click="goArtical('Política de retención de datos')"
          >
            {{ $t("footer.数据保留政策") }}
          </div>
          <div
            class="flex items-center gap-2 cursor-pointer"
            @click="goArtical('Política de Quejas')"
          >
            {{ $t("footer.投诉政策") }}
          </div>
          <div
            class="flex items-center gap-2 cursor-pointer"
            @click="goArtical('Política de reclamaciones')"
          >
            {{ $t("footer.投诉政策2") }}
          </div>
        </div>
        <div class="flex flex-col gap-4 w-[300px] text-[14px]">
          <div
            class="flex items-center gap-2 h-[38px] text-[--main-color] text-[20px] font-[400]"
          >
            {{ $t("footer.帮助中心") }}
          </div>
          <div
            class="flex items-center gap-2 cursor-pointer"
            @click="goArtical('Envío internacional')"
          >
            {{ $t("footer.国际配送") }}
          </div>
          <div
            class="flex items-center gap-2 cursor-pointer"
            @click="goArtical('Transporte Aéreo')"
          >
            {{ $t("footer.航空运输") }}
          </div>
          <div
            class="flex items-center gap-2 cursor-pointer"
            @click="goArtical('Política de transporte nacional en México')"
          >
            {{ $t("footer.墨西哥的国家交通政策") }}
          </div>
          <div
            class="flex items-center gap-2 cursor-pointer"
            @click="goArtical('Política de empaque, envase y embalaje')"
          >
            {{ $t("footer.包装和包装政策") }}
          </div>
          <div
            class="flex items-center gap-2 cursor-pointer"
            @click="goArtical('Política de almacenamiento')"
          >
            {{ $t("footer.存储政策") }}
          </div>
        </div>
        <div class="flex flex-col gap-4 w-[260px] text-[14px]">
          <div
            class="flex items-center gap-2 h-[38px] text-[--main-color] text-[20px] font-[400]"
          >
            {{ $t("footer.关于我们") }}
          </div>
          <div
            class="flex items-center gap-2 cursor-pointer"
            @click="goArtical('Acerca de Alib2b')"
          >
            {{ $t("footer.关于我们") }}
          </div>
          <div
            class="flex items-center gap-2 cursor-pointer"
            @click="goArtical('Presentamos Alib2b')"
          >
            {{ $t("footer.介绍Alib2b") }}
          </div>
          <div
            class="flex items-center gap-2 cursor-pointer"
            @click="goArtical('¿Por qué nace Alib2b?')"
          >
            {{ $t("footer.Alib2b为何诞生") }}
          </div>
        </div>
      </div>
      <div class="py-[35px] weblink-wrapper" style="border-top: 2px solid #e05f42">
        <div class="flex items-center justify-between weblink1">
          <div>
            <a href="https://7-eleven.com.mx/" target="_blank">
              <img src="/images/weblinks/711.png" />
            </a>
          </div>
          <div>
            <a href="https://shopee.com.mx/" target="_blank">
              <img src="/images/weblinks/shopee.png" />
            </a>
          </div>

          <div>
            <a href="https://www.oxxo.com/" target="_blank">
              <img src="/images/weblinks/oxxo.png" />
            </a>
          </div>
          <div>
            <a href="https://www.pakmail.com.mx/" target="_blank">
              <img src="/images/weblinks/pakmail.png" />
            </a>
          </div>
          <div>
            <a href="https://estafeta.com/" target="_blank">
              <img src="/images/weblinks/estafeta.png" />
            </a>
          </div>
          <div>
            <a href="https://www.tresguerras.com.mx/" target="_blank">
              <img src="/images/weblinks/tres.png" />
            </a>
          </div>
          <div>
            <a href="https://www.alibaba.com/" target="_blank">
              <img src="/images/weblinks/alibaba.png" />
            </a>
          </div>
        </div>
        <div class="flex items-center justify-between weblink2 mt-[24px]">
          <div>
            <a href="https://www.1688.com/" target="_blank">
              <img src="/images/weblinks/1688.png" />
            </a>
          </div>
          <div>
            <a href="https://Asia360mx.com" target="_blank">
              <img src="/images/weblinks/asia360.png" />
            </a>
          </div>
          <div>
            <a href="https://mx.aliexpress.com/" target="_blank">
              <img src="/images/weblinks/aliexpress.png" />
            </a>
          </div>
          <div>
            <a href="https://www.paquetexpress.com.mx/" target="_blank">
              <img src="/images/weblinks/paq.png" />
            </a>
          </div>
          <div>
            <a href="https://www.paypal.com/mx/home" target="_blank">
              <img src="/images/weblinks/paypal.png" />
            </a>
          </div>

          <div>
            <a href="https://www.dhl.com/mx-es/home.html" target="_blank">
              <img src="/images/weblinks/dhl.png" />
            </a>
          </div>
          <div>
            <a href="https://www.fedex.com/es-mx/home.html" target="_blank">
              <img src="/images/weblinks/fedex.png" />
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import bus from "@/utils/mitt";
import { goArtical } from "@/utils/common";
import {
  LocationOutline,
  CallOutline,
  MailOutline,
  TimeOutline,
} from "@vicons/ionicons5";

const onClickRegister = () => {
  bus.emit("showRegisterDialog");
};

const onClickLogin = () => {
  bus.emit("showLoginDialog");
};
</script>

<style lang="scss" scoped>
.weblink1 {
  gap: 8px;
  img {
    width: 100%;
  }
}
.weblink2 {
  gap: 8px;
  img {
    width: 100%;
  }
}

.weblink-wrapper {
  > div div {
    display: flex;
    align-items: center;
    // width: 180px;
    // height: 60px;
    background-color: #fff;
    border-radius: 4px;
    width: 0;
    flex: 1;
  }
  a {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    img {
      margin: auto;
    }
  }
}
</style>
